<template>
  <div>
    <ul class="m-account-list" v-if="accountDaylistData.length > 0">
      <li v-for="item in accountDaylistData">
        <!--<div class="list-tip" v-if="item.ispay === '0'">无需验证码, 直接登录</div>-->
        <div class="list-item"
             :style="{ backgroundImage: `url(${item.imagebg})`}"
             v-link="{ name: 'AccountDetail', params: { aid: item.aid } }">
          <div class="details" :style="{ backgroundImage: `url(${item.imageright})`}">
            <h3 class="brand" :style="{ backgroundImage: `url(${item.imageicon})`}">{{ item.nameline1 }}</h3>
            <h2 class="name">{{ item.nameline2 }}</h2>
            <h1 class="type">{{ item.nameline3 }}</h1>
          </div>
        </div>
        <div class="list-tip" v-if="item.ispay === '1'">无需验证码, 直接登录</div>
        <div class="list-action">
          <div class="inner">
            <div class="price">
              <span>¥</span>{{ item.money }}<span>元</span>
            </div>
            <buy-button :aid="item.aid" :money="item.money"
                        :canbuy="item.canbuy"
                        :title="item.nameline1 + item.nameline2 + item.nameline3"></buy-button>
          </div>
        </div>
      </li>
    </ul>

    <div class="m-sold-out" v-if="showSoldOut">
      <img src="../../static/img/sold_out.png" alt="已抢光">
      <p>帐号已抢光<br>可回首页申请试用</p>
    </div>

  </div>
</template>
<script scoped>
  import _ from 'lodash'
  import Uid from '../assets/utils/uid.js'
  import api from '../assets/utils/api.js'
  import BuyButton from '../components/common/BuyButton.vue'
  export default {
    components: {
      'buy-button': BuyButton
    },
    data () {
      return {
        title: '购买帐号列表',
        // accountDaylistData: [{'aid': '5', 'pid': 1, 'imageicon': 'http://www.vipbanlv.com/www/assets/dist/img/iqiyi_thumbnail.png', 'imageright': 'http://www.vipbanlv.com/www/assets/dist/img/iqiyi_logo.png', 'imagebg': 'http://www.vipbanlv.com/www/assets/dist/img/gold_card.png', 'nameline1': '\u7231\u5947\u827a\u89c6\u9891', 'nameline2': '\u9ec4\u91d1\u4f1a\u5458\u5361', 'nameline3': 'VIP', 'money': '11.00', 'days': 10, 'canbuy': 1}, {'aid': '5', 'pid': 1, 'imageicon': 'http://www.vipbanlv.com/www/assets/dist/img/iqiyi_thumbnail.png', 'imageright': 'http://www.vipbanlv.com/www/assets/dist/img/iqiyi_logo.png', 'imagebg': 'http://www.vipbanlv.com/www/assets/dist/img/gold_card.png', 'nameline1': '\u7231\u5947\u827a\u89c6\u9891', 'nameline2': '\u9ec4\u91d1\u4f1a\u5458\u5361', 'nameline3': 'VIP', 'money': '12.00', 'days': 10, 'canbuy': 0}]
        accountDaylistData: [],
        showSoldOut: false
      }
    },
    created () {
      // const uid = _.isNil(Uid.getUid()) ? '1' : Uid.getUid().uid
      Uid.getUid().then(res => {
        const uid = res.uid

        api.apiCall('accountDaylist', {
          uid: uid,
          pid: _.parseInt(this.$route.params.pid)
        }).then(data => {
          if (_.isString(data.returncode)) data.returncode = _.parseInt(data.returncode)
          switch (data.returncode) {
            case 0:
              if (data.list.length > 0) {
                this.accountDaylistData =
                  _(this.accountDaylistData).concat(data.list).orderBy(['canbuy',
                    'money'], ['desc', 'asc']).value()
                this.showSoldOut = false
              } else {
                this.showSoldOut = true
              }
              break
            case -1:
              console.error('accountDaylist接口返回错误：用户参数不正确')
              break
            case -2:
              console.error('accountDaylist接口返回错误：其他参数不正确')
              break
          }
        })
      })
    },
    ready () {
      document.title = this.title
    }
  }
</script>
